<!-- Created by henian.xu on 2019/3/18. -->

<template>
    <Page>
        <Container>
            <div class="pa-a">
                <Divider label="日期时间" />
                <Date
                    format="YYYY-MM-DD HH:mm:ss"
                    v-model="formModel.input"
                />
            </div>
            <div class="pa-a">
                <Divider label="滑轮选择器" />
                <Picker
                    :data="pickerData"
                    v-model="picker"
                />
            </div>
            <div class="pa-a">
                <Divider label="滑轮" />
                <Pulley
                    :data="pulleyData"
                    v-model="pulley"
                >
                    {{ pulley }}
                </Pulley>
            </div>
            <div class="pa-a">
                <Divider label="表单" />
                <XForm
                    ref="form"
                    :model="formModel"
                    :rules="formRules"
                >
                    <FormItem
                        prop="input"
                        icon="f003"
                        label="label"
                        sub-label="subLabel"
                    >
                        <DatePicker
                            format="YYYY-MM-DD HH:mm:ss"
                            v-model="formModel.date"
                        />
                    </FormItem>
                    <FormItem
                        prop="input"
                        icon="f003"
                        label="label"
                        sub-label="subLabel"
                    >
                        <XInput
                            is-clear
                            v-model="formModel.input"
                        />
                    </FormItem>
                    <FormItem
                        prop="checked"
                        icon="f003"
                        label="label"
                        sub-label="subLabel"
                        show-feedback
                    >
                        <Checkbox
                            type="radio"
                            label="label"
                            sub-label="subLabel"
                            is-clear
                            v-model="formModel.checked"
                            value="a"
                        />
                        <Checkbox
                            type="radio"
                            is-clear
                            v-model="formModel.checked"
                            value="b"
                            reverse
                        >
                            label
                        </Checkbox>
                    </FormItem>
                    <FormItem
                        prop="select"
                        icon="f003"
                        label="label"
                        sub-label="subLabel"
                        direction="column"
                    >
                        <XSelect
                            label="选择器"
                            sub-label="XSelect"
                            type="textarea"
                            multiple
                            is-clear
                            :data="Array(3).fill(1).map((item,index)=>({id:index,name:index}))"
                            v-model="formModel.select"
                        />
                    </FormItem>
                    <FormItem
                        prop="select"
                        icon="f003"
                        label="label"
                        sub-label="subLabel"
                    >
                        <XSelect
                            label="选择器"
                            sub-label="XSelect"
                            type="textarea"
                            multiple
                            tiling
                            is-clear
                            :data="Array(3).fill(1).map((item,index)=>({id:index,name:index}))"
                            v-model="formModel.select"
                        />
                    </FormItem>
                    <!--<FormItem
                        prop="region"
                        icon="f003"
                        label="label"
                        sub-label="subLabel"
                        show-feedback
                        direction="column"
                    >
                        <RegionSelect
                            type="textarea"
                            is-clear
                            v-model="formModel.region"
                        />
                    </FormItem>-->
                </XForm>

                <div class="pa-a">
                    <XButton
                        label="验证表单"
                        theme="main"
                        @click="$refs['form'].validate().then(()=>{})"
                    />
                    <XButton
                        label="清空验证"
                        theme="primary"
                        @click="$refs['form'].clearValidate()"
                    />
                    <XButton
                        label="表单重置"
                        theme="success"
                        @click="$refs['form'].resetFields()"
                    />
                </div>
            </div>
            <div class="pa-a">
                <Divider label="标签页" />
                <Tab v-model="tabIndex">
                    <TabPanel label="label1">
                        <template v-slot:icon>
                            <XIcon
                                content="f002"
                                size="big"
                            />
                        </template>
                        <template v-slot:label>
                            <div class="label">
                                slot
                            </div>
                        </template>
                        <template v-slot:subLabel>
                            <div class="sub-label">
                                subLabel
                            </div>
                        </template>
                        <template v-slot:badge>
                            <Badge
                                label="000"
                                size="small"
                            />
                        </template>
                        current index = 0
                    </TabPanel>
                    <TabPanel
                        v-for="index in 8"
                        :key="index"
                        :label="`label${index}`"
                        sub-label="subLabel"
                        :icon="`f00${index+1}`"
                        :badge="`${1000 + index}`"
                    >
                        <div @click="tabIndex=8-index">
                            current index = {{ index }}<br>on click goto {{ 8 - index }}
                        </div>
                    </TabPanel>
                </Tab>
            </div>
            <div class="pa-a">
                <Divider label="宫格" />
                <GridGroup
                    item-border
                    :column="4"
                >
                    <Grid
                        v-for="item in 10"
                        :key="item"
                        label="label"
                        icon="f005"
                        badge="99"
                        theme="main"
                        :column="4"
                    />
                    <Grid
                        label="label"
                        icon="f005"
                        badge="99"
                        theme="main"
                        :column="2"
                    />
                </GridGroup>
            </div>
            <div class="pa-a">
                <Divider label="列表" />
                <CellGroup>
                    <Cell
                        v-for="item in 5"
                        :key="item"
                        icon="f004"
                        label="label"
                        :sub-label="item%2?'subLabel':''"
                        extra="extra"
                        theme="main"
                        badge="99"
                        link
                        to="/home"
                    />
                </CellGroup>
            </div>
            <div class="pa-a">
                <Divider label="按钮" />
                <XButton
                    icon="f003"
                    :label="`label ${count}`"
                    :sub-label="`label ${count}`"
                    theme="main"
                    radius="all"
                    fill
                />
                <XButton
                    icon="f003"
                    :label="`label ${count}`"
                    theme="main"
                    radius="all"
                    plain
                    fill
                />
                <XButton
                    :label="`label ${count}`"
                    :sub-label="`subLabel ${count}`"
                    theme="g3"
                    icon="f003"
                    direction="column"
                />
                <XButton
                    :label="`label ${count}`"
                    :sub-label="`subLabel ${count}`"
                    theme="g2"
                />
                <XButton>
                    <template v-slot:label>
                        <div class="label">
                            button {{ count }}
                        </div>
                    </template>
                    <template v-slot:subLabel>
                        <div class="sub-label">
                            slot sub label {{ count }}
                        </div>
                    </template>
                </XButton>
            </div>
            <div class="pa-a">
                <Divider label="图标" />
                <XIcon content="f003" />
                <XIcon
                    content="f003"
                    theme="main"
                    size="big"
                />
                <XIcon
                    content="f003"
                    theme="main"
                    size="more"
                    badge="88"
                />
            </div>
            <div class="pa-a">
                <Divider label="徽章" />
                <Badge label="99" />
            </div>
            <div class="pa-a">
                <Divider label="标签" />
                <XLabel
                    label="label"
                    sub-label="subLabel"
                    size="normal"
                />
                <XLabel
                    label="label"
                    sub-label="subLabel"
                    theme="main"
                    size="normal"
                />
            </div>
            <div class="pa-a">
                <Divider label="链接/路由" />
                <Linker to="/home">
                    home
                </Linker>
                <Linker to="http://www.baidu.com">
                    baidu
                </Linker>
            </div>
        </Container>
    </Page>
</template>

<script>
export default {
    name: 'Index',
    data() {
        return {
            count: 0,
            timer: 0,
            tabIndex: 8,
            formModel: {
                date: '',
                input: '',
                checked: '',
                select: [],
                region: '',
            },
            formRules: {
                input: {
                    required: true,
                    message: '不能为空',
                    // trigger: 'change',
                },
            },
            pickerData: [],
            picker: [10, 20, 80],
            pulleyData: [],
            pulley: 88,
        };
    },
    created() {
        this.pulleyData = Array(100)
            .fill(1)
            .map((item, index) => ({ id: index, name: `${index} item` }));
        // .map((item, index) => index);
        this.pickerData = [[...this.pulleyData], [...this.pulleyData], [...this.pulleyData], [...this.pulleyData]];
        this.timer = setInterval(() => {
            this.count++;
        }, 1000);
        // console.log(this);
    },
    beforeDestroy() {
        clearInterval(this.timer);
    },
};
</script>

<style lang="scss">
</style>
